<template>
    <div id="tmpl">
        <!--1.0 商品轮播图-->
        <div class="slider">
            <slider :imgs="imgs"></slider>
        </div>

        <!--2.0 实现商品购买区-->
        <div id="buy">
            <h4 v-text="info.title"></h4>
            <p class="line"></p>
            <ul>
                <li class="price">
                    市场价：<s>￥{{info.market_price}}</s> 销售价：<span>￥{{info.sell_price}}</span>
                </li>
                <li class="inputli">
                    购买数量：<input-num v-on:dataobj="getcount" class="inputnum"></input-num>
                    <transition name="show"
                                @before-enter="mybeforeEnter"
                                @enter="myenter"
                                @after-enter="myafterEnter"
                    >
                        <div v-if="isshow" class="ball"></div>
                    </transition>
                </li>
                <li>
                    <mt-button type="primary" size="small">立即购买</mt-button>
                    <mt-button type="danger" @click="toshopcar" size="small">加入购物车</mt-button>
                </li>
            </ul>
        </div>

        <!--3.0 图文详情-->
        <div class="params">
            <h6>商品阐述</h6>
            <p class="line"></p>
            <ul>
                <li>商品货号：{{info.goods_no}}</li>
                <li>库存情况：{{info.stock_quantity}}</li>
                <li>上架时间：{{info.add_time | datefmt('YYYY-MM-DD')}}</li>
            </ul>
        </div>

        <!--4.0 商品评论-->
        <div id="other">
            <router-link v-bind="{to: '/goods/gooddesc/' + this.id}">
                <mt-button class="imgdesc" type="primary" size="large">图文详情</mt-button>
            </router-link>
            <router-link v-bind="{to: '/goods/goodcomment/' + this.id}">
                <mt-button type="danger" size="large">商品评论</mt-button>
            </router-link>
        </div>

    </div>
</template>

<script>
    import slider from "../subcom/slider.vue";
    import common from "../../kits/common.js";
    import {Toast} from 'mint-ui';
    import InputNum  from "../subcom/inputNum.vue";

    //使用vm对象
    import {vm,COUNT_EVENT} from '../../kits/vm.js';

    //操作localStorage的js
    import {setItem, valueObj} from "../../kits/myLocalStorage.js";

    export default {
        components: {
            slider ,
            'input-num' : InputNum
        },
        data() {
            return {
                //隐藏或显示小球
                isshow: false,
                inputNumCount:1, //当前购买数量
                id:0,//表示商品id
                imgs:[],//存储轮播图
                info: //存储商品详细信息
                    {
                        // "id": 87,
                        // "title": "Vue从入门到住院",
                        // "add_time": "2019-5-9 11:51:39",
                        // "goods_no": "SD34897897",
                        // "stock_quantity": 79,
                        // "market_price": 145,
                        // "sell_price": 99
                    }

            }
        },
        created() {
            this.id = this.$route.params.id;
            this.getimgs();
            this.getinfo();
        },
        methods: {
            /*动画的三个方法*/
            mybeforeEnter(el) {
                el.style.transform = "translate(0px, 0px)";
            },
            myenter(el, done) {
                //保证小球出现的动画
                el.offsetWidth;

                //设置小球的节狐位置
                el.style.transform = "translate(75px,846px)";

                done();
            },
            myafterEnter(el) {
                //重置小球的出事状态
                this.isshow = !this.isshow;
            },
            /**
             * 加入购物车方法
             */
            toshopcar() {
                //1.0 触发事件, 这个组件也是Vue.vue下的子组件，因此调用该组件的$emit触发其COUNT_EVENT所绑定的事件就可以让App.vue中监听
                vm.$emit(COUNT_EVENT, this.inputNumCount);

                //2.0 将数据保存到localStorage
                valueObj.count = this.inputNumCount;
                valueObj.goodsid = this.id;
                setItem(valueObj);
                //3.0实现小球动画
                this.isshow = !this.isshow;
            },
            getcount(count) {//获取getnumber组件中传入的值
                this.inputNumCount = count;
            },
            //1.0 获取商品详细描述
            getinfo() {
                var url = common.apidomain + "/GoodDesc?id=" + this.id;
                this.$http.get(url).then(function (resp) {
                    if (resp.body.status != 0) {
                        Toast(resp.body.message);
                        return;
                    }
                    this.info = resp.body.message[0];
                })
            },
            getimgs() {
                var url = common.apidomain + "/GetThum?pageindex=" + this.id;

                this.$http.get(url).then(function (resp) {
                    if (resp.body.status != 0) {
                        Toast(resp.body.message);
                        return;
                    }
                    this.imgs= resp.body.message;
                })
            }
        }
    }
</script>

<style scoped>
    .slider {
        border: 1px solid rgba(0, 0, 0, 0.4);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        margin: 5px;
    }
    #buy, .params, #other{
        margin: 5px;
        padding: 5px;
        border: 1px solid rgba(0, 0, 0, 0.4);
    }

    #buy .line {
        height: 1px;
        border: 1px solid rgba(0,0,0,0.2);
    }
    
    #buy h4{
        padding: 5px;
        color: #0094ff;
    }

    #buy ul, .params ul {
        padding-left: 0px;
    }
    #buy li, .params li{
        list-style: none;
        padding: 8px;
    }

    #buy .price span {
        color: red;
    }

    #other .imgdesc {
        margin-bottom: 20px;
    }

/*设置更改数量的小按钮*/
    .inputnum {
        position: absolute;
        left: 100px;
        top: 5px;
    }
    .inputli {
        position: relative;
    }


    /*小球飞入动画*/
    .ball{
        background-color: red;
        height: 20px;
        width: 20px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        position: absolute;
        left: 150px;
        top: 10px;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        -ms-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease;
        z-index: 100;
    }
</style>